<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('字段详细设计')" />
    <th:block th:include="include :: select2-css" />
    <link th:href="@{/css/choose_data_map.css}" rel="stylesheet"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight add-question">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox-content">

                <form class="form-horizontal" id="pageElementForm">
                    <input type="hidden" name="pageId" th:value="${pageId}">
                    <input type="hidden" name="pageImageId" th:value="${pageImageId}">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">选择元素：</label>
                        <div class="col-sm-8">
                            <select id="pageElement" class="form-control select2-multiple" multiple>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />
<script th:inline="javascript">
    var selectIds = [];
    pageElementRefList()
    pageElementList();
    $('#pageTag').select2({
        placeholder: "选择元素",
        allowClear: true
    });
    // 保存页面图片与元素关系
    function submitHandler() {
        var pageElementIds = $.form.selectSelects("pageElement").split(",");
        if(pageElementIds.length==0){
            return $.modal.alertWarning("请先选择元素");
        }
        var params = {
            pageId: $("input[name='pageId']").val(),
            pageImageId: $("input[name='pageImageId']").val(),
            pageElementIds: pageElementIds
        };
        var config = {
            url: ctx + "pageImageElementRef/pageImageElementRef/save",
            type: "POST",
            dataType: "json",
            contentType: 'application/json',
            data: JSON.stringify(params),
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
                $.modal.disable();
            },
            success: function(result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    $.modal.alertSuccess(result.msg);
                    $.modal.close();
                    return false;
                }
                if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg);
                    return false;
                }
                $.modal.alertError(result.msg);
            }
        };
        $.ajax(config);
    }
    // 获取元素列表
    function pageElementList() {
        var config = {
            url:  ctx + "pageElement/pageElement/list",
            type: "post",
            dataType: "json",
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    var data = {};
                    data.list = result.rows || [];
                    var html = "";
                    data.list.forEach((e) => {
                        html += `<option value="${e.id}" ${selectIds.indexOf(e.id)>=0?'selected':''}>${e.name}-${e.code}</option>`
                    })
                    $("#pageElement").html(html);
                } else if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        };
        $.ajax(config);
    }
    /**
     *   页面图片关联元素列表
     */
    function pageElementRefList() {
        let config = {
            url: ctx + "pageImageElementRef/pageImageElementRef/list",
            type: "post",
            dataType: "json",
            async: false,
            data: {
                pageId: $("input[name='pageId']").val(),
                pageImageId: $("input[name='pageImageId']").val()
            },
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function (result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    result.data.length>0 && result.data.forEach(function(e){
                        selectIds.push(e.pageElementId)
                    })
                    return false;
                }
                if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                    return false;
                }
                $.modal.alertError(result.msg);
            }
        };
        $.ajax(config);
    }
</script>
</body>
</html>